//1.封装一个函数 动态生成页面
setPage();
$(".rightSpan2 button").mousedown(function () {
  $(this).css("color", "red");
});
$(".rightSpan2 button").mouseup(function () {
  $(this).css("color", "#fff");
});
function setPage() {
  //定义变量 存储 种类 数量 金额
  let type = 0;
  let number = 0;
  let money = 0;
  let money2 = 0;
  //获取本地存储的信息
  let cart = localStorage.cart; //json字符串形式
  if (cart === undefined) {
    $(".container").html(`<h1>你还没创建购物车</h1>`);
  } else {
    //已经创建了购物车
    let bool = true;
    //购物车数据
    cart = JSON.parse(cart);
    console.log(cart);
    //判断购物车数据，如果cart的长度是0；表示购物车没有商品
    if (cart.length === 0) {
      $(".container").html("<h1>您的购物车已经被清空,请您再去添加商品</h1>");
    } else {
      //购物车里已经有了数据信息
      //动态生成信息
      let str = ` <div class="header">
                    <p>
                        欢迎光顾本店
                    </p>
                    <p>您的每一次光临，都是对我们最大的支持!</p>
                </div>
               `;
      //中间部分
      cart.forEach(function (item, key) {
        money2 = item.goods_price * item.num;
        if (item.buy === false) {
          bool = false;
        } else {
          type++; //种类数
          number += item.num; //商品数量
          money += item.goods_price * item.num;
        }
        //中间商品部分写入
        str += ` <div class="cartInfo">
                    <div class="check">
                        <div class="check_other">
                            <input type="checkbox" name="other" index="${key}" ${
          item.buy ? "checked" : ""
        }/>
                        </div>
                        <div class="img_logo">
                            <img src="${item.goods_small_logo}" alt="" />
                        </div>
                    </div>

                        <div class="infoTxt">${item.goods_name}</div>
                        <div class="one_price">
                            <span class="newPrice">￥ ${item.goods_price}</span>
                        </div>
                        <div class="num">
                                <button name="减" index="${key}" class="btn btn-default" ${
          item.num === 1 ? "disabled" : ""
        }>-</button>
                                <input type="text" class="num" value="${
                                  item.num
                                }" />
                                <button name="加" index="${key}" type="button" class="btn btn-default" ${
          item.num == item.goods_number ? "disabled" : ""
        }>+</button>
                        </div>
                        <div class="price">￥${money2.toFixed(2)}</div>
                        <div class="doIt">
                            <a href="" class="move">移入收藏夹</a>
                            <a href="" name="del" index="${key}">删除</a>
                        </div>
                     </div>`;

        //结束部分
        let str1 = `
                      <div class="all2">
                          <div class="all">
                        <input name="all" type="checkbox" value="" />
                        <span>全选</span>
                    </div>
                      </div>

                      <div class="rightSpan2">
                          <div>已选商品 <span style="color:red">${type}</span> 种</div>
                          <div >已选商品 <span style="color:red">${number}</span>  件</div>
                          <div>合计(不含运费):<span>￥${money.toFixed(
                            2
                          )}</span> </div>
                          <button>结算</button>
                      </div>
                      `;

        //将字符串写入标签中
        $(".container").html(str);
        $(".footer2").html(str1);
        $('[name="all"]').prop("checked", bool);
      });
    }
  }
}
//2.给父级标签添加点击事件 通过委托事件完成函数程序的执行
$(".container").click(function (e) {
  //获取cart数据
  const cart = JSON.parse(localStorage.cart);
  //如果点击的是全选按钮
  if (e.target.getAttribute("name") === "all") {
    //设定localStorage中 所有数据单元 buy 属性值
    cart.forEach((item) => {
      item.buy = e.target.checked;
    });
  } else if (e.target.getAttribute("name") === "other") {
    //修改索引下标 和 点击当前标签索引下标相同的数组中的数据
    cart[e.target.getAttribute("index") - 0].buy = e.target.checked;
  } else if (e.target.getAttribute("name") === "del") {
    cart.splice(e.target.getAttribute("index") - 0, 1);
  } else if (e.target.getAttribute("name") === "减") {
    cart[e.target.getAttribute("index") - 0].num--;
  } else if (e.target.getAttribute("name") === "加") {
    cart[e.target.getAttribute("index") - 0].num++;
  }

  //将新数组存储给localStorage.cart存储
  //cart转化为json字符串
  localStorage.cart = JSON.stringify(cart);
  console.log(cart);
  //调用函数 动态生成页面
  setPage();
});
